<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue指令练习</title>
		<style>
			/* 为属性设置隐藏 */
			[v-cloak] {
				display: none;
			}
			
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<!-- 1.指令练习 v-cloak
				当浏览器解析JS完成前,用户看到的数据是{{msg}},
				直到浏览器加载完成全部JS.则{{msg}}替换为具体的数据
				需求:不想让用户看到没有解析的数据,使用v-cloak属性
			 -->
			<h1>{{msg}}</h1>
			<hr/>
			<!--2. v-text将v-cloak优化了 -->
			<h1 v-text="message"></h1>
			<hr/>
			<!--3. v-html动态展现HTML标签 -->
			<span v-html="html"></span>
			<hr/>
			<!-- v-pre 跳过编译效果,显示原始mustache标签 -->
			<h3 v-pre>{{hello}}</h3>
			<hr/>
			<!-- v-once用法 元素和组件 只渲染一次 -->	
			<h3 v-once>{{once}}</h3>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			//一般工作中字符写法提倡使用单引号''
			const app = new Vue({
				el: "#app",
				data: {
					msg: "测试v-cloak",
					message: "测试v-text",
					hello: 'hello pre',
					html: '<h3>测试HTML</h3>',
					once: "检查渲染次数"
				}
			})
		</script>
	</body>
</html>